<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="警情名称" >
            <el-input v-model.trim="form.name" autocomplete="off" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="警情类型" >
            <el-select
                v-model="form.type"
                style="width: 100%"
                clearable
                @clear="form.type = ''"
                disabled
            >
              <el-option v-for="item in typeAllList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="警情内容">
            <el-input v-model.trim="form.content" type="textarea" :rows="5" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="filesList.length > 0">
          <el-form-item label="附件" >
            <el-upload ref="uploadPicture" class="upload-demo" action="" :auto-upload="false" :on-preview="handlePreview"
                       :multiple="true" disabled :file-list="filesList"></el-upload>
          </el-form-item>
        </el-col>


      </el-row>
    </el-form>
<!--    <div slot="footer" class="dialog-footer">-->
<!--      <el-button @click="close">取 消</el-button>-->
<!--      <el-button type="primary" @click="save" :loading="loading" :disabled="disabled">{{ loading ? '确定中 ...' : '确 定' }}</el-button>-->
<!--    </div>-->
  </el-dialog>
</template>

<script>
import {alarmList,getById,getOneFile} from "@/api/warningOrder";
import {download} from "@/api/warningOrderDept";

export default {
  name: 'Edit',
  data() {
    return {
      filesList: [],
      form: {
        id: '',
        name: '',
        type: '',
        content: '',
      },
      rules: {
      },
      title: '',
      typeAllList: [],
      dialogFormVisible: false,
      loading: false,
      disabled: false,
    }
  },
  created() { },
  methods: {
    showDia(row) {
      //获取所有警令类型
      this.typeList()
      if (!row) {
        this.title = '详情'
      } else {
        this.title = '详情'
        this.form = Object.assign({}, row)
        this.getOneInfo();
      }
      this.dialogFormVisible = true
    },
    handleChange(value) {
      let cityNames = []
      value.forEach((e) => {
        cityNames.push(CodeToText[e])
      })
      this.citys = cityNames.join('/')
    },
    close() {
      this.$refs['form'].resetFields()
      this.form = this.$options.data().form
      this.filesList = [];
      this.dialogFormVisible = false
    },

    //获取所有警令类型
    async typeList() {
      const { data } = await alarmList();
      this.typeAllList = data;
    },
    //ID查询
    async getOneInfo(){
      const { data } = await getById(this.form);
      console.log("data",data);
      this.form = data;
      this.filesList = data.files;
    },
    handlePreview(file) {
      console.log("file",file);

      this.$baseSeeOrDown('请选择操作？', null, async () => {
        download(file.id).then((res) => {
          const url = window.URL.createObjectURL(new Blob([res]))
          const link = document.createElement('a')
          link.href = url
          link.setAttribute('download', file.name)
          document.body.appendChild(link)
          link.click()
        })
      },async () => {
        var fileName = file.name
        if (fileName.indexOf(".pdf") === -1 && fileName.indexOf(".jpg") === -1 && fileName.indexOf(".png") === -1 && fileName.indexOf(".jpeg") === -1){
          this.$baseMessage('此类型文件不支持预览', 'error')
        }else {
          let fileId = file.id;
          var x = {}
          x.id = fileId;
          getOneFile(x).then((res) => {
            window.open(res.data.file_path)
          })
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep{
  .el-upload--text{display: none !important;}
}

</style>